<template>
  <div class="newmuse">
    <ul class="tanxin">
      <li v-for="(item, index) in newlists" :key="index">
        <div></div>
        <img :src="item.blurPicUrl" />
        <h5 class="ellipsis">{{ item.name }}</h5>
        <p class="ellipsis">{{ item.company }}</p>
      </li>
      <li v-for="item in newlists" :key="item.id">
        <div></div>
        <img :src="item.blurPicUrl" />
        <h5 class="ellipsis">{{ item.name }}</h5>
        <p class="ellipsis">{{ item.company }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { Newdetuijian } from "@/request/api";
export default {
  data() {
    return {
      newlists: [],
    };
  },
  created() {
    Newdetuijian({ type: "hot" }).then((res) => {
      if (res.data.code === 200) {
        // console.log(222);
        // console.log(res.data.albums);
        this.newlists = res.data.albums;
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.newmuse {
  width: 730px;
  margin: 20px;
  background-color: #f5f5f5;
  border: 1px solid #333;
  overflow: hidden;
  ul {
    margin: 20px;
    animation: run 12s infinite linear;
    &:hover {
      animation-play-state: paused;
    }
    li {
      width: 130px;
      height: 160px;
      position: relative;
      margin-right: 13px;

      div {
        width: 100px;
        height: 100px;
        background-color: #000;
        border-radius: 50%;
        margin-left: 30px;
        margin-top: 10px;
      }
      img {
        width: 90%;
        height: 110px;
        position: absolute;
        top: 0;
      }
      h5 {
        width: 100px;
        margin-top: 5px;
        font-weight: 400;
      }
      p {
        width: 100px;
        color: #999;
        margin-top: 5px;
      }
    }
  }
}
@keyframes run {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-1710px);
  }
}
</style>